<template>
  <div class="submenu flex-col-start" @click.stop>

    <div class="flex-row-center label"  @click="showChildMenu=true" ref="label">
      <slot class="font-content"></slot>
      <i style="color: gold" class="el-icon-caret-bottom"></i>
    </div>

    <transition name="el-zoom-in-top">
      <div class="flex-col-start body transition-box" v-show="showChildMenu" ref="body" >
        <div  v-for="(item,index) in list" :key="index" class="menu-item flex-row-start">
          <div class="body-icon flex-row-center">
            <slot name="icon" :item="item">
              <!--              <i :class="item.icon" ></i>-->
            </slot>
          </div>
          <slot name="content" :item="item">
          </slot>
        </div>

      </div>
    </transition>

  </div>
</template>

<script>

import {Hotel} from '@icon-park/vue'
export default {
  name: "SubMenu",
  components:{Hotel},
  props:{
    list:{
      type:Array
    }
  },
  data() {
    return {
      showChildMenu:false
    }
  },
  methods: {
    initBodyPosition(){
      let label=this.$refs.label
      let height = label.getBoundingClientRect().height;
      // this.$refs.body.style.transform=` translateY(-${height*0.2}px)`

    }
  },
  mounted() {
    this.initBodyPosition()
    document.addEventListener("click", ()=>{
      this.showChildMenu=false
    });
  }
}
</script>

<style scoped lang="less">
  .submenu{
    width: 100%;
    height: 100%;
    position: relative;

    .label{
      width: 100%;
      height: 100%;
      min-height: 100%;
      font-size: 16px;
      caret-color: transparent;
    }
    .body{
      position: absolute;
      //left:-50%;
      top: 80%;
      width: 150px;
      //transform: translateX(50%);
      height: fit-content;
      background-color: white;
      color: #4d4d4d;
      border-radius: 3px;
      padding: 5px 0;

      .menu-item{

        width: 90%;
        height: 40px;
        word-break: keep-all;
        text-overflow: ellipsis;
        overflow-x: hidden;
        border-radius: 2px;
        caret-color: transparent;
        .body-icon{

          width: 40px;
          height: 40px;
          background-color: transparent;
          color: #4d4d4d;
          i{
            font-size: 14px;
            color: #4d4d4d;
          }
        }
        &:hover{
          background-color: #ecebeb;
        }
      }
    }
  }
</style>